<template>
  <div :style="{height:getScreenHeight()+'px'}">
    <image class="bgimg" src="root:img/bg.png" resize="cover" />
    <div class="wrappers">
      <scroller class="scroller">
        <text class="title">Register</text>
        <div class="inputBox">
          <input
            type="text "
            class="input bb"
            v-model="first_name"
            placeholder="First name"
            placeholder-color="#F2f2f2"
          />
          <text class="gap10"></text>
          <input
            type="text"
            class="input bb"
            v-model="last_name"
            placeholder="Last name"
            placeholder-color="#F2f2f2"
          />
        </div>

        <div class="inputBox bb">
          <input
            type="password"
            class="input"
            v-model="password"
            placeholder="Password"
            placeholder-color="#F2f2f2"
          />
        </div>
        <div class="inputBox bb">
          <input
            type="password"
            class="input"
            v-model="repassword"
            placeholder="Confirm password"
            placeholder-color="#F2f2f2"
          />
        </div>
        <div class="inputBox bb">
          <text class="phoneType">+61</text>
          <input
            v-model="phone"
            type="tel"
            class="input"
            :maxlength="phoneLength"
            placeholder="Mobile number"
            placeholder-color="#F2f2f2"
          />
        </div>
        <div class="inputBox bb">
          <input
            type="email"
            class="input"
            maxlength="30"
            v-model="email"
            placeholder="Email"
            placeholder-color="#F2f2f2"
          />
        </div>
        <div class="inputBox bb">
          <input
            type="text"
            class="input"
            v-model="vertify"
            placeholder
            placeholder-color="#F2f2f2"
          />
          <text class="codeBtn" v-if="state">{{ currentTime }} s</text>
          <text class="codeBtn" v-if="!state" @click="send_verify_code">Receive SMS code</text>
        </div>

        <div class="radioBox" @click="agree=!agree">
          <text class="iconfont radio" v-if="agree">&#xe602;</text>
          <text class="iconfont radio" v-if="!agree">&#xe67f;</text>
          <text class="loginType" @click="push('root:app/login/agreement.js')">User Agreement</text>
        </div>
        <text class="singnIn" @click="toRegist">Register and log in</text>
        <!-- <div class="registerType">
          <text
            class="logintip"
            @click="loginType='phone'"
            v-if="loginType=='email'"
          >Registered mobile phone number</text>
          <text
            class="logintiphone"
            @click="loginType='email'"
            v-if="loginType=='phone'"
          >Registered mail</text>
        </div>-->
        <div class="tipsreg">
          <text class="regTxt">Your password must be:</text>
          <text class="regTxt">1.At least 6 characters.</text>
          <text
            class="regTxt"
          >2.A combination of at least two of the following : uppercase or lower case letters (A-Z or a-z),numbers(0-9) and special characters(?_-|@#).</text>
        </div>
      </scroller>
      <div class="rowBox" @click="toLogin">
        <text class="boxItem ccc">Already have an account,</text>
        <text class="boxItem">Log in now</text>
      </div>
    </div>

    <div v-if="loading" class="mask" @click="event=> event.stopPropagation()">
      <floading class="indicator" color="#303030"></floading>
    </div>
  </div>
</template>

<script>
const pref = weex.requireModule("storage");
import { send_verify, register, verify_login } from "../../mixin/ajax.js";
import Utils from "../../mixin/utils";

export default {
  data() {
    return {
      agree: false,
      regStep: "1",
      password: "",
      nickname: "",
      last_name: "",
      first_name: "",
      phone: "",
      email: "",
      vertify: "",
      inviteCode: "",
      pageHeight: "",
      repassword: "",
      loading: false,
      state: false, //是否开启倒计时
      totalTime: 60, //总时间，单位秒
      recordingTime: 0, //记录时间变量
      currentTime: 0, //显示时间变量
      loginType: "phone"
    };
  },
  computed: {
    phoneLength() {
      if (this.phone.indexOf("0") == 0) {
        return 10;
      } else {
        return 9;
      }
    }
  },
  created() {
    this.pageHeight = Utils.env.getPageHeight();
    var pref = weex.requireModule("storage");
    pref.getItem("inviteCode", event => {
      if (event.result == "success") {
        this.inviteCode = event.data;
      }
    });
  },
  methods: {
    toNext() {
      this.regStep = "2";
    },
    checkingTime() {
      let that = this;
      //判断是否开启
      if (this.state) {
        //判断显示时间是否已到0，判断记录时间是否已到总时间
        if (this.currentTime > 0 && this.recordingTime <= this.totalTime) {
          //记录时间增加 1
          this.recordingTime = this.recordingTime + 1;
          //显示时间，用总时间 - 记录时间
          this.currentTime = this.totalTime - this.recordingTime;
          //1秒钟后，再次执行本方法
          setTimeout(() => {
            //定时器内，this指向外部，找不到vue的方法，所以，需要用that变量。
            that.checkingTime();
          }, 1000);
        } else {
          //时间已完成，还原相关变量
          this.state = false; //关闭倒计时
          this.recordingTime = 0; //记录时间为0
          this.currentTime = this.totalTime; //显示时间为总时间
        }
      } else {
        //倒计时未开启，初始化默认变量
        this.state = false;
        this.recordingTime = 0;
        this.currentTime = this.totalTime;
      }
    },
    send_verify_code() {
      let that = this;
      if (!that.phone) {
        that.toast("Enter your phoneNumber");
        return false;
      }
      let refs = /^(\+?61|04|4)\d{8}$/;
      if (!refs.test(that.phone)) {
        that.toast("Mobile phone number is not standard");
        return false;
      }

      this.loading = true;
      send_verify(
        {
          mobile: that.phone - 0,
          type: "1" // 1.注册验证码 2.登录验证码
        },
        (res, flag) => {
          this.loading = false;
          if (flag) {
            if (res.code == "200") {
              that.toast(res.message);
              //把显示时间设为总时间
              that.currentTime = this.totalTime;
              //开始倒计时
              that.state = true;
              //执行倒计时
              that.checkingTime();
            } else {
              that.toast(res.message);
            }
          }
        }
      );
    },
    toRegist() {
      let data = {};
      let pwdreg = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{6,20}$/;

      if (!this.first_name) {
        this.toast("Enter your first name");
        return false;
      }
      if (!this.last_name) {
        this.toast("Enter your last name");
        return false;
      }
      if (!this.password) {
        this.toast("Enter your password");
        return false;
      }
      if (!pwdreg.test(this.password)) {
        this.toast("Enter REG password");
        return false;
      }

      if (this.password.length < 6) {
        this.toast("Password minimum 6 characters");
        return false;
      }

      if (!this.repassword) {
        this.toast("Enter your password again");
        return false;
      }
      if (this.repassword !== this.password) {
        this.toast("Does not match password field");
        return false;
      }

      if (!this.phone) {
        this.toast("Enter your phoneNumber");
        return false;
      }
      if (!this.email) {
        this.toast("Enter your email");
        return false;
      }
      if (!this.vertify) {
        this.toast("Enter your verifyCode");
        return false;
      }
      if (!this.agree) {
        this.toast(
          "Please read the User Agreement carefully before registration"
        );
        return false;
      }

      data = {
        nickname: this.nickname,
        users_id: this.inviteCode,
        account: this.phone - 0,
        password: this.password,
        repassword: this.password,
        email: this.email,
        last_name: this.last_name,
        first_name: this.first_name,
        verify: this.vertify
      };

      register(data, (res, flag) => {
        if (flag) {
          if (res.code == 200) {
            pref.setItem("users_id", res.data.users_uuid);
            // const loginBroad = new BroadcastChannel("login");
            // loginBroad.postMessage("update");
            var notify = weex.requireModule("notify");
            notify.send("login", "");
            this.backTo("A");
          } else {
            this.toast(res.message);
          }
        }
      });
    },
    toLogin() {
      this.back();
    }
  }
};
</script>

<style scoped>
.bgimg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.iconfont {
  font-family: iconfont;
}
.tipsreg {
  width: 580px;
  font-size: 24px;
  color: #fff;
}
.regTxt {
  font-size: 24px;
  color: #fff;
  padding: 5px 0;
}
.inputIcon {
  font-size: 30px;
  color: #ffffff;
  width: 60px;
  text-align: left;
}

.wrappers {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  color: #ffffff;
  justify-content: flex-start;
  align-items: center;
  width: 750px;
}
.scroller {
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  width: 750px;
}
.reCenter {
  justify-content: center;
}

.title {
  color: #ffffff;
  font-size: 60px;
  margin-top: 100px;

  width: 600px;
  margin-bottom: 20px;
  text-align: left;
  text-align: center;
}

.input {
  flex: 1;
  height: 60px;
  padding-left: 5px;
  color: #ffffff;
  font-size: 30px;
  background-color: transparent;
}
.gap10 {
  margin: 0 10px;
}
.inputBox {
  margin-top: 30px;
  height: 70px;
  width: 600px;
  flex-direction: row;
  align-items: center;
  padding-top: 8px;
}

.phoneType {
  height: 60px;
  color: #ffffff;
  line-height: 60px;
  font-size: 30px;
  margin-right: 20px;
}

.codeBtn {
  height: 46px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 24px;
  font-size: 22px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(48, 48, 48, 1);
  line-height: 46px;
  text-align: center;
  padding: 0 20px;
}

.radioBox {
  flex-direction: row;
  margin-top: 30px;
  justify-content: flex-start;
  align-items: center;
  width: 556px;
  height: 40px;
}

.radio {
  color: #ffffff;
  font-size: 34px;
  margin-right: 20px;
}

.loginType {
  color: #ffffff;
  font-size: 26px;
}
.registerType {
  background-color: transparent;
  padding: 10px;
}
.logintip {
  font-size: 22px;
  margin-top: 32px;
  height: 30px;
  line-height: 30px;
  color: #ffffff;
  background-color: transparent;
}

.logintiphone {
  font-size: 22px;
  margin-top: 32px;
  height: 30px;
  line-height: 30px;
  color: #ffffff;
  background-color: transparent;
}

.singnIn {
  width: 580px;
  height: 80px;
  border-radius: 40px;
  background-color: #ffffff;
  color: #303030;
  text-align: center;
  line-height: 80px;
  font-size: 28px;
  margin-top: 100px;
  margin-bottom: 20px;
}
.singnIn:active {
  background-color: #eeeeee;
}

.rowBox {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 30px;
}

.br {
  border-right-color: #ffffff;
  border-right-width: 1px;
  border-right-style: solid;
}

.bb {
  border-bottom-color: #ffffff;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.boxItem {
  font-size: 32px;
  color: #ffffff;
  text-align: center;
}

.ccc {
  color: #cccccc;
}
.mask {
  position: fixed;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}

.indicator {
  width: 40px;
  height: 40px;
}
</style>
